<template>
  <div>
    <h1>app</h1>
    <p>当前计数为：{{ count }}</p>
    <button @click="increment">+</button>
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue'
const count = ref(100)
const increment = () => {
  count.value++
}

// const stop = watchEffect(() => {
//   console.log('count变化了', count.value)

//   if (count.value > 102) {
//     stop()
//   }
// })

const stop = watchEffect((onCleanup) => {
  let timer = setTimeout(() => {
    console.log('count变化了', count.value)
  }, 1000)
  // 清除副作用
  onCleanup(() => {
    clearTimeout(timer)
  })

  if (count.value > 102) {
    stop()
  }
})
</script>

<style lang="scss" scoped></style>
